<template>
    <div class="home-container">
        <!-- 跑马灯 -->
        <div id="carousel-container">
            <div class="block">
                <span class="el-carousel-title">默认 Hover 指示器触发</span>
                <el-carousel height="200px">
                    <el-carousel-item v-for="item in carousel" :key="item.id">
                        <!-- <h3 class="small">{{ item }}</h3> -->
                        <img class="carousel-img" :src="item.url" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <!-- 公告 -->
        <div class="notice-container">
            <span class="icon"><i class="el-icon-message-solid"></i></span>
            <div class="content">
                <marquee>2019/07/06: 邀请好友得现金奖励，推广员专属活动！</marquee>
            </div>
            <span class="icon"><i class="el-icon-arrow-right"></i></span>
        </div>

        <!-- 学堂 -->
        <div class="school-container">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-menu"></i> 营销学堂</span>
                    <span class="all">全部 <i class="el-icon-arrow-right"></i></span>
                </div>
                <div v-for="item in school" :key="item.id" class="text item">
                    <div class="title">{{ item.title }}</div>
                    <div class="time">{{ item.create_at }} <i class="el-icon-arrow-right"></i></div>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                carousel: [{
                    id: 1,
                    url: '/img/1.png'
                }, {
                    id: 2,
                    url: '/img/2.png'
                }, {
                    id: 3,
                    url: '/img/3.png'
                }],
                school: [{
                    id: 1,
                    title: "会员卡裂变模式：4个案例详细解析客户为何主动购买并疯狂转发",
                    create_at: "2019-07-15"
                }, {
                    id: 2,
                    title: "用这6个文案套路，让客户忍不住关注、转发、想买",
                    create_at: "2019-07-14"
                }, {
                    id: 3,
                    title: "两类热点，四个案例，五层维度，学习卫龙辣条怎样热点营销",
                    create_at: "2019-07-13"
                }, {
                    id: 4,
                    title: "互动营销怎么做？紧抓两个特点，杜蕾斯用五步打造经典案例",
                    create_at: "2019-07-11"
                }, {
                    id: 5,
                    title: "每天卖出200万瓶，年销售45亿，逆营销的老干妈通过这5件事做到了",
                    create_at: "2019-07-10"
                }]
            };
        },
    };
</script>

<style scoped>
    .home-container {
        margin-bottom: 50px;
        background-color: #FFF;
    }

    .el-carousel-title {
        display: none;
    }

    .el-carousel__container .carousel-img {
        width: 100%;
        height: 100%;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    /******************************************
     * notice
     ******************************************/
    .notice-container {
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 20px;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        background-color: #c7e2fe;
    }

    .notice-container .content {
        font-size: 14px;
        color: var(--color-theme);
    }

    .notice-container span i {
        font-size: 14px;
        color: var(--color-theme);
    }

    .notice-container>span:nth-child(1) {
        padding-right: 5px;
    }

    .notice-container>span:nth-child(3) {
        width: 35px;
        cursor: pointer;
    }

    /******************************************
     * school
     ******************************************/
    .school-container .box-card .clearfix {
        display: flex;
        justify-content: space-between;
    }

    .school-container .box-card .clearfix .all {
        font-size: var(--font-sm-size);
    }

    .school-container .item {
        color: var(--color-major);
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid var(--border-line);
        display: flex;
        justify-content: space-between;
        padding-right: 15px;
    }

    .school-container .item:last-child {
        border-bottom: 0;
    }

    .school-container .item .title {
        width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .school-container .item .time {
        color: var(--color-minor);
        font-weight: 300;
    }
</style>